<style type="text/css">
  .search_detail_default .search_product_title {
    border: 0;
  }

 

  .search_detail_default .search_product-warp{
    width: calc(100% - 155px);
    display: flex;
    flex-wrap: wrap;
  }


  .search_detail_default .search_key_warp{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .search_detail_default .search_key_warp .search_key_warp-item{
    line-height: 30px;
    padding: 0 20px;
    background: var(--secondary_button_bg);
    border: 1px solid var(--secondary_button_color);
    color: var(--secondary_button_color);
    border-radius: var(--button_border_radius);
    height: 30px;
    box-sizing: border-box;
    border-radius: 30px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .search_detail_default .search_key_warp .search_key_warp-item:hover{
    background: var(--secondary_button_color);
    color: #fff;
  }

  .search_detail_default .search_key_warp .search_key_warp-divider{
    width: 1px;
    background-color: #ccc;
    margin: 0 12px;
  }


  .search_detail_default .search_form {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    padding: 2rem 0;
    flex-direction: column;
    align-items: center;
  }

  .search_detail_default .search_form form {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .search_detail_default .search_form .search_product {
    height: 44px;
    width:100%;
    text-indent: 10px;
    border: 1px solid #707070;
    box-sizing: border-box;
    border-radius: var(--button_border_radius);
  }

  .search_detail_default .search_form .search_product_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 44px;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: var(--button_border_radius);
    background-color: var(--main_button_bg);
    color: var(--main_button_color);
  }

  .search_detail_default .collection_top_bar {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 3rem;
    flex-direction: column;
  }

  .search_detail_default .sort_by {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    margin-top: 2rem;
  }

  .search_detail_default .sort_by span {
    margin-right: 1rem;
  }
  .search_detail_default #search_text {
    font-weight: bold;
  }

  .search_detail_default .sort_by select {
    height: 2.8rem;
    border: 1px solid #d4d4d4;
    cursor: pointer;
  }
  .search_detail_default .collection_content ul {
    display: grid;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
    grid-template-columns: repeat(var(--web_column), minmax(50px, 1fr));
  }

  .search_detail_default .collection_content li {
    list-style-type: none;
    line-height: 1;
    text-align: center;
    width: 100%;
    overflow: hidden;
  }


  .search_detail_default .collection_content .product_pic {
    margin-bottom: 30px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .search_detail_default .collection_content .soldout {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 50px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 14px;
  }

  .search_detail_default .collection_content .product_pic .product_img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
  }

  .search_detail_default .collection_content .product_pic img {
    max-width: 100%;
  }

  .search_detail_default .collection_content .block_product_name {
    margin-bottom: 10px;
    line-height: 1.5;
  }
  .search_detail_default .collection_content .product_price {
    font-weight: bold;
  }

  .search_detail_default .collection_content .product_oldprice {
    color: #888;
    text-decoration: line-through;
    margin-left: 5px;
    font-weight: normal;
  }
  @media(max-width: 1200px) {
    .search_detail_default .collection_content ul {
      grid-template-columns: repeat(var(--web_column), 1fr);
    }
  }
  @media(max-width: 767px) {
    .search_detail_default .search_form {
      padding: 0 0 20px;
    }
    .search_detail_default .search_form form {
      width: 100%;
      flex-wrap: wrap;
      height: auto;
    }
    .search_detail_default .search_form .search_product-warp {
      width: 100%;
    }
    .search_detail_default .search_form .search_product_btn {
      margin-top: 15px;
      width: 100%;
    }
    .search_detail_default .collection_content ul {
      grid-row-gap: 15px;
      grid-column-gap: 15px;
      grid-template-columns: repeat(2, 1fr);
    }
    .search_detail_default .collection_content .product_pic {
      margin-bottom: 20px;
    }

  }

</style>
<div class="search_detail_default container_wrapper" id="search_detail">
  <h1 class="title search_product_title">{{lang.search.search}}</h1>
  <div class="plugin-container-header"></div>

  <div class="search_form">
    <form action="/search" onsubmit="return search('.search_product')">
      <div class="search_product-warp">
        <input class="search_product" placeholder="{{section.settings.placeholder}}" value="{{search_detail.keywords}}" type="text" name="q">
        {% if section.settings.search_values and section.settings.search_values.size > 0  %}
        <div class="search_key_warp">
          {% for value in section.settings.search_values %}
          <a href="/search?q={{value}}&page=1" class="search_key_warp-item">{{value}}</a>
          {% endfor %}
        </div>
        {% endif %}
       
      </div>
      <input class="search_product_btn" style="cursor: pointer;" type="submit" value="{{ lang.general.searchword }}">
    </form>

  </div>
  {% assign searchLangth = search_detail.products | size %}
  {% if search_detail.keywords %}
    <div class="collection_top_bar">
      <div class="product_num" data="{{paginate.items}}">{{paginate.items}}
        {{lang.search.results_found_for}}
        {% if search_detail.keywords %}"<span id="search_text">{{search_detail.keywords}}</span>"
        {% endif %}
      </div>
      {% if searchLangth %}
        <div class="sort_by">
          <span>{{ lang.general.sort_by }}</span>
          <select class="form-control" id="sort_by_select">
            {% for option in search_detail.sort_options %}
              <option value="{{option.value | default:''}}" {% if option.value == search_detail.sort_by %} selected="selected" {% endif %}>{{ option.name }}</option>
            {% endfor %}
          </select>
        </div>
      {% endif %}
    </div>
    <div class="collection_content collection_product_wap_2" style="--web_column:{{section.settings.web_column | default:4}}">

      {% if searchLangth %}
        <ul>
          {% for item in search_detail.products %}
            {% assign hit_type_value = paginate.current_page |minus:1  | times: paginate.page_size | plus:forloop.index %}
            {% include collection_product , product : item , hit_type_category:search_detail.keywords,hit_type_value:hit_type_value %}
          {% endfor %}

        </ul>
        {% include pagination ,{ paginate : paginate } %}
      {% else %}
        <div class="plugin-search-empty">
          {% include empty ,{text:lang.general.empty }%}
        </div>
      {% endif %}
    </div>
  {% endif %}
  <div class="plugin-container-footer"></div>

</div>

<script type="text/javascript">
  $(function () {
    $("#sort_by_select").change(function (params) {
      const sort_by = $(this).val();
      location.href = moi.setUrlParams(location.href, {
        "sort_by": sort_by || "",
        "page": 1
      });
    });
  });
</script>

{% schema %}
{
	"tag": "section",
	"class": "search_detail",
	"is_global": false,
	"name": {
		"zh_CN": "搜索页",
		"en_US": "Search page"
	},
	"max_blocks": 3,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input_number",
			"max": 80,
			"min": 8,
			"id": "pagesize",
			"label": {
				"zh_CN": "商品每页数量",
				"en_US": "Product number each page"
			},
			"info": {
				"zh_CN": "默认数量12个;最小8个、最大80个;",
				"en_US": "Default number 12, minimum 8, maximum 80;"
			},
			"refresh": true,
			"default": 12
		},
    {
			"type": "card_slider",
			"id": "web_column",
			"max": "6",
			"min": "3",
			"label": {
				"zh_CN": "pc每排商品数量",
				"en_US": "PC number per row"
			}
		},
		{
			"type": "card_input",
			"id": "placeholder",
			"label": {
				"zh_CN": "搜索框底纹",
				"en_US": "Search box background"
			}
		},
		{
			"type": "card_tags",
			"label": {
				"zh_CN": "搜索词",
				"en_US": "Search term"
			},
			"default": [],
			"id": "search_values"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"pagesize": 12,
			"placeholder": "search",
			"search_values": [],
      "web_column":4,
			"refresh": true
		},
		"blocks": []
	}
}
{% endschema %}